<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>woodwhales-code-generator</title>
    <link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/code-generator/my-css/mycss.css}" >
</head>
<body>
<div class="layui-container">
    <div th:replace="~{code-generator/my-common/common::header}"></div>

    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>配置信息详情</legend>
        </fieldset>
    </div>
    <div class="layui-row">
        <a th:href="@{/codeTemplate/}" class="layui-btn layui-bg-gray layui-btn layui-btn-xs">返回</a>
    </div>
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>菜单信息</legend>
        </fieldset>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">配置名称</label>
        <div class="layui-form-mid layui-word-aux" th:text="${codeTemplateConfig.codeNavigationConfig.configName}"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">配置备注</label>
        <div class="layui-form-mid layui-word-aux" th:text="${codeTemplateConfig.codeNavigationConfig.description}"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单配置</label>
        <div class="layui-input-block">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>tab名称</th>
                    <th>tab链接</th>
                    <th>cite名称</th>
                    <th>sort</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="navigationConfig : ${codeTemplateConfig.codeNavigationConfig.navigationConfigs}">
                    <td th:text="${navigationConfig.tab.addTabTitle}"></td>
                    <td th:text="${navigationConfig.tab.addTabUrl}"></td>
                    <td th:text="${navigationConfig.cite.name}"></td>
                    <td th:text="${#numbers.formatInteger(navigationConfig.sort, 0)}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-colla-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-fluid" th:onclick="'generateMenu(' + ${codeTemplateConfig.codeNavigationConfig.id} + ')'">生成菜单</button>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>列表信息</legend>
        </fieldset>
    </div>
    <div class="layui-collapse">
        <div class="layui-colla-item" th:each="codeListPageConfig : ${codeTemplateConfig.codeListPageConfigList}">
            <h2 class="layui-colla-title" th:text="${codeListPageConfig.configName}"></h2>
            <div class="layui-colla-content">
                <div class="layui-form-item">
                    <label class="layui-form-label">配置备注</label>
                    <div class="layui-form-mid layui-word-aux" th:text="${codeListPageConfig.description}"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">搜索框配置</label>
                    <div class="layui-input-block">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>name</th>
                                <th>id</th>
                                <th>placeholder</th>
                                <th>sort</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="searchInput : ${codeListPageConfig.listPageConfigs.searchInputs}">
                                <td th:text="${searchInput.name}"></td>
                                <td th:text="${searchInput.id}"></td>
                                <td th:text="${searchInput.placeholder}"></td>
                                <td th:text="${#numbers.formatInteger(searchInput.sort, 0)}"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">请求地址</label>
                    <div class="layui-form-mid layui-word-aux" th:text="${codeListPageConfig.listPageConfigs.tableConfig.requestUrl}"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">字段配置</label>
                    <div class="layui-input-block">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>field</th>
                                <th>title</th>
                                <th>width</th>
                                <th>sort</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="col : ${codeListPageConfig.listPageConfigs.tableConfig.cols}">
                                <td th:text="${col.field}"></td>
                                <td th:text="${col.title}"></td>
                                <td th:text="${col.width != null} ? ${#numbers.formatInteger(col.width, 0)} : ''"></td>
                                <td th:text="${#numbers.formatInteger(col.sort, 0)}"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-fluid" th:onclick="'generateTable(' + ${codeListPageConfig.id} + ')'">生成配置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
    </div>
    <div th:replace="~{code-generator/my-common/common::footer}"></div>
</div>
</body>
<script th:src="@{/webjars/layui/layui.js}"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['form', 'layer', 'table', 'layedit', 'util', 'element'], function(){
        var form = layui.form,
            layer = layui.layer,
            util = layui.util,
            element = layer.element,
            table = layui.table;

        window.generateMenu = function (codeNavigationConfigId) {
            let postBody = {};
            postBody.codeNavigationConfigId = codeNavigationConfigId;

            $.ajax({
                url:'/codeTemplate/generateMenu',
                type:'post',
                dataType:'json',
                contentType:"application/json",
                async:true,
                cache:false,
                data:JSON.stringify(postBody),
                success:function(res) {
                    if(res.code === 0) {

                    } else {
                        layer.msg('操作失败，异常原因：' + res.msg, {icon: 5});
                    }
                },
                error:function(res) {
                    layer.msg('网络异常', {icon: 5});
                }
            });

            return false;
        }

        window.generateTable = function (codeListPageConfigId) {
            let postBody = {};
            postBody.codeListPageConfigId = codeListPageConfigId;
            $.ajax({
                url:'/codeTemplate/generateTable',
                type:'post',
                dataType:'json',
                contentType:"application/json",
                async:true,
                cache:false,
                data:JSON.stringify(postBody),
                success:function(res) {
                    if(res.code === 0) {

                    } else {
                        layer.msg('操作失败，异常原因：' + res.msg, {icon: 5});
                    }
                },
                error:function(res) {
                    layer.msg('网络异常', {icon: 5});
                }
            });

            return false;
        }

    });
</script>
</html>